<template>
	<view>
		<u-navbar
			title="购物车"
			placeholder
			autoBack
		>
		</u-navbar>
		<scroll-view @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewHeight}">
			<view style="padding: 32rpx;">
				<template v-if="loading">
					<view style="padding: 32rpx;">
						<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 7" :key="i"></u-skeleton>
					</view>
				</template>
				<template v-else-if="!loading && dataList.length === 0">
					<u-empty
					    mode="car"
						icon="http://cdn.uviewui.com/uview/empty/car.png"
					>
					</u-empty>
				</template>
				<template v-else-if="!loading && dataList.length > 0">
				</template>
				<view style="background-color: #fff;border-radius: 16rpx;overflow: hidden;">
					<u-swipe-action>
					    <u-swipe-action-item
						  @click="swipeDeleteGoods(goods.id)"
					      :options="options1"
						  v-for="(goods, index) in dataList" 
						  :key="goods.id"
						  :index="goods.id"
					    >
							<view :style="{opacity: goods.invalid ? 0.5 : 1}" :class="['shop-cart-box', dataList.length - 1 === index ? null : 'u-border-bottom']">
								<view class="shop-cart-l" @click="changeChecked(goods, index)">
									<text :style="{fontSize: '48rpx',color: goods.isChecked ? appColor : '#c8c9cc'}" :class="['iconfont', goods.isChecked ? 'icon-31xuanzhong' : 'icon-checkboxweixuanzhongda']"></text>
								</view>
								<view class="shop-cart-r">
									<u--image @click="toDetail(goods)" radius="16rpx" mode="aspectFill" :src="goods.image[0].url" width="140rpx" height="140rpx"></u--image>
									<view style="width: 16rpx;"/>
									<view class="shop-cart-r-1">
										<view @click="toDetail(goods)" class="shop-cart-r-1-title">
											<view class="u-line-2">{{goods.goodsName}}</view>
											<view style="height: 4rpx;"/>
											<view style="font-size: 24rpx;color: #666;" class="u-line-2" v-if="goods.skuId">{{goods.skuName}}</view>
										</view>
										<view @click="toDetail(goods)" style="height: 48rpx;"/>
										<view class="shop-cart-r-1-con" v-if="!goods.invalid">
											<text @click="toDetail(goods)" style="color: #f40215;font-size: 28rpx;">&yen;{{goods.price}}</text>
											<u-number-box :asyncChange="true" @change="onChange(goods, $event)" :min="0" :max="99" :buttonSize="24" disabledInput v-model="goods.buyCount"></u-number-box>
										</view>
										<view class="shop-cart-r-1-con" v-else>
											<text @click="toDetail(goods)" style="font-size: 28rpx;">{{goods.invalidMsg}}</text>
											<view style="width: 120rpx;">
												<u-button size="mini">已失效</u-button>
											</view>
											<!-- <u-number-box :asyncChange="true" @change="onChange(goods, $event)" :min="0" :max="20" :buttonSize="24" disabledInput v-model="goods.buyCount"></u-number-box> -->
										</view>
									</view>
								</view>
							</view>
					    </u-swipe-action-item>
					</u-swipe-action>
				</view>
			</view>
		</scroll-view>
		<view class="good-detail-bootom" v-if="!loading">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-l1">
					<view style="display: flex;align-items: center;" @click="changeAll">
						<text :style="{fontSize: '48rpx',color: isAll ? appColor : '#c8c9cc'}" :class="['iconfont', isAll ? 'icon-31xuanzhong' : 'icon-checkboxweixuanzhongda']"></text>
						<text style="font-size: 28rpx;color: #000;padding-left: 8rpx;">全选</text>
					</view>
					<view style="margin-left: 16rpx; display: flex;align-items: center;color: #f40215;font-size: 28rpx;">
						总计: &yen;{{total}}
					</view>
				</view>
				<view class="good-detail-bootom-r">
					<view class="good-detail-bootom-r-btn">
						<u-button @click="toBuy" :color="appColor" text="去结算" shape="circle"></u-button>
					</view>
				</view>
			</view>	
		</view>
	</view>	
</template>

<script>
	import {goodsCart, operationCart, deleteCart, clearCart, calculate} from '@/api/shop.js';
	import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				isAll: false,
				loading: true,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 10,
				info: {
					count: 1
				},
				options1: [
					{
						text: '删除',
						style: {
							backgroundColor: '#f40215',
						}
					}
				],
				dataList: [], // 购物车列表
				total: 0
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor || '#2AAF60'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 50 + 'px';
			},
		},
		methods: {
			...mapActions(['setCartDetail', 'setCartCount']),
			// 去结算
			toBuy() {
				let cartDetail = this.dataList.filter(item => item.isChecked)
				if(cartDetail.length === 0) {
					return this.$cuTip('您未选中商品');
				}
				let cartDetail1 = [];
				cartDetail.forEach(item => {
					let obj = {}
					obj.goodsId = item.goodsId;
					obj.buyCount = item.buyCount;
					obj.goodsName = item.goodsName;
					obj.price = item.price;
					obj.image = item.image;
					obj.cartId = item.id
					// sku商品
					if(item.skuId) {
						obj.sku = item.goodsSku;
					}
					cartDetail1.push(obj);
				})
				
				this.setCartDetail({cartDetail: cartDetail1});
				let url = '/pages/shop/shopOrder'
				this.$cuNavigateTo(url);
			},
			// 详情页面
			toDetail({goodsId: id, goodsCategory, invalid, invalidMsg}) {
				if(invalid) {
					let url = `/pages/shop/noShop?invalidMsg=${invalidMsg}`;
					this.$cuNavigateTo(url);
				} else {
					let url = `/pages/shop/shopDetail?id=${id}&goodsCategory=${goodsCategory}`;
					this.$cuNavigateTo(url);
				}
				
			},
			// 改变选中
			changeChecked(goods, index) {
				if(goods.invalid) {
					return;
				}
				let cur = uni.$u.deepClone(goods);
				cur.isChecked = !cur.isChecked;
				this.dataList.splice(index, 1, cur);
				let isIndex = this.dataList.findIndex(item => !item.isChecked && !item.invalid);
				if(isIndex === -1) {
					this.isAll = true;
				} else {
					this.isAll = false;
				}
				this.calculate();
			},
			// 全选
			changeAll() {
				if(this.isAll) {
					this.dataList = this.dataList.map(item => {
						item.isChecked = false;
						return item
					})
					this.total = 0
					this.isAll = false
				} else {
					this.dataList = this.dataList.map(item => {
						if(!item.invalid) {
							item.isChecked = true;
						}
						return item
					})
					this.calculate();
					this.isAll = true
				}
			},
			calculate() {
				let res1 = this.dataList.filter(item => item.isChecked && !item.invalid);
				if(res1.length === 0) {
					 // this.$cuTip('暂无商品');
					return
				}
				this.$cuLoading('计算中').then(() => {
					calculate(res1).then(res => {
						this.total = res.result || 0;
					}).finally(() => {
						uni.hideLoading();
					})
				})
			},
			// 更新数量
			onChange({buyCount, id, isChecked}, {value}) {
				const that = this;
				// 数量为0提示
				if(value === 0) {
					uni.showModal({
						title: '提示',
						content: '您确定删除吗?',
						confirmColor: that.appColor,
						success: function (res) {
							if (res.confirm) {
								that.deleteGoods(id);
							}
						}
					})
				} else {
					that.operationCart({id, value, isChecked});
				}
			},
			// 滑动删除
			swipeDeleteGoods(id) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '您确定删除吗?',
					confirmColor: that.appColor,
					success: function (res) {
						if (res.confirm) {
							that.deleteGoods(id)
						}
					}
				})
			},
			// 删除当前商品
			deleteGoods(id) {
				deleteCart(id).then(res => {
					let index = this.dataList.findIndex(item => item.id === id);
					this.dataList.splice(index, 1);
					this.calculate();
					this.setCartCount({cartCount: res.result});
				})
			},
			onLower() {
				if(this.status === 'loading') {
					this.getGoodsCart();
				}
			},
			// 更新数量
			operationCart({id, value, isChecked}) {
				operationCart({id, buyCount: value}).then(res => {
					let index = this.dataList.findIndex(item => item.id === id);
					let cur = uni.$u.deepClone(this.dataList[index]);
					cur.buyCount = value;
					this.dataList.splice(index, 1, cur);
					if(isChecked) {
						this.calculate();
					}
				})
			},
			// 获取购物车列表
			getGoodsCart() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				goodsCart(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.dataList = empty.concat(records);
					} else {
						this.dataList = this.dataList.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					this.loading = false;
				});
			},
		},
		onLoad() {
			this.getGoodsCart();
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.shop-cart-box {
		padding: 16rpx;
		display: flex;
		align-items: center;
		.shop-cart-l {
			display: flex;
			align-items: center;
			width: 72rpx;
		}
		.shop-cart-r {
			flex: 1;
			display: flex;
			.shop-cart-r-1 {
				flex: 1;
				.shop-cart-r-1-title {
					line-height: 32rpx;
					font-size: 26rpx;
					color: #000;
					height: 68rpx;
				}
				.shop-cart-r-1-con {
					height: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
	
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);     /*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);  /*兼容 iOS>11.2*/
		box-sizing: content-box;
		.good-detail-bootom-l1 {
			display: flex;
			align-items: center;
			margin-right: 48rpx;
			width: 50%;
		}
		.good-detail-bootom-r {
			flex: 1;
			display: flex;
			.good-detail-bootom-r-btn {
				flex: 1;
			}
		}
	}
</style>
